<template>
    <v-data-table
    :headers="headers"
    :items="desserts"
    :height="bar.height"
    fixed-header
    checkbox-color="green"
    :items-per-page="bar.page"
  >
    <template v-slot:top>
      <v-toolbar
        flat
        :color="bar.class"
        :dark="bar.dark"
        dense
      >
        <v-toolbar-title v-text="bar.title"></v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>

        <template>
          
          <v-btn
            color="primary"
            dark
            class="mb-2"
            @click="newItem(bar.function)"
            icon
          >
            <v-icon>{{ bar.icon }}</v-icon>
          </v-btn>
        </template>
        
        <v-dialog
          v-model="dialogGruop"
          max-width="600px"
        >
            <v-AddGroup
                v-if="dialogGruop"
                :groupName="group_name"
                :group="group"
                @closeDialog="closeGroupDialog"
            ></v-AddGroup>   
        </v-dialog>

        <v-dialog
          v-model="dialogConfig"
          max-width="600px"
        >
            <v-TaskConfig
                v-if="dialogConfig"
                :config="config"
                @closeDialogConfig="closeDialogConfig"
            ></v-TaskConfig>
        </v-dialog>

      </v-toolbar>
    </template>

    <template
        v-slot:item.key_value="{ item }"
    >
        <div style="width: 250px">{{ item.key_value }}</div>
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon
            small
            @click="editItem(item)"
        >
            mdi-pencil
        </v-icon>
        <v-icon
            small
            @click="deleteItem(item)"
        >
            mdi-delete
        </v-icon>
    </template>
    
    <v-data-footer
      disable-items-per-page
    ></v-data-footer>
  </v-data-table>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import GroupAdd from './GroupAdd.vue'
import TaskConfig from './AppConfig.vue'


export default defineComponent({
    setup() {
        
    },
    components: {
        'v-AddGroup': GroupAdd,
        'v-TaskConfig': TaskConfig
    },
    props: {
      bar: {
          type: Object,
          default: { class: 'green', title: '用户列表', dark: false },
      },
      head: {
          type: Object,
          default: null
      },
      body: {
          type: Object,
          default: null
      },
    },
    data(){
        return {
            headers: [],
            desserts: [],
            dialogGruop: false,
            dialogConfig: false,
            group_name: '',
            group: {
                group_id: '',
                cn_name: '',
                user: '',
                pwd: '',
                phone: '',
                email: '',
            },
            config: {
                app_range: 'task',
                act_type: '',
                key_name: '',
                key_value: '',
                description: '',
            },
        }
    },
    mounted(){
        this.initialize()
    },
    methods: {
        initialize () {
            this.headers = this.head
            this.desserts = this.body
            if(this.body.length>0){
                this.group_name = this.body[0].group_id
            }
        },
        newItem: function(func){
            if(func==='group'){
                this.dialogGruop = true
            }
            if(func==='config'){
                this.dialogConfig = true
            }
        },
        closeGroupDialog: function(){
            this.dialogGruop = false
            // 更新1：后台查询一次
            let get_data = {'username': localStorage.getItem('username')}
            this.$api.task.queryGroupInfo(get_data).then(res=>{
                console.log('get_group_info ...')
                console.log(res)
                this.desserts = res.data.data
            })
        },
        closeDialogConfig: function(){
            this.dialogConfig = false
            let get_data = {'app': 'task'}
            this.$api.task.getTaskConfig(get_data).then(res=>{
                console.log('closeDialogConfig ...')
                console.log(res)
                this.desserts = res.data.data
            })
        },
        editItem(item){
            if(this.bar.function === 'group'){
                this.group = item
                this.dialogGruop = true
            }
            if(this.bar.function === 'config'){
                this.config = item
                this.dialogConfig = true
            }
        },
        deleteItem: function(item){
            let get_data = {'id': item.id}
            let flag = confirm('确认要删除吗？')
            if(flag){
                console.log('删除！')
                if(this.bar.function === 'group'){
                    this.$api.task.deletePerson(get_data).then(res=>{
                        console.log(res)
                        let index = this.desserts.indexOf(item)
                        this.desserts.pop(index)
                    })
                }
                if(this.bar.function === 'config'){
                    this.$api.task.deleteAppConfig(get_data).then(res=>{
                        console.log(res)
                        let index = this.desserts.indexOf(item)
                        this.desserts.pop(index)
                    })
                }
            }
        },
        
    }
})
</script>

<style scoped>

</style>